<template>
  <div class="homes_banner">
    <Header_h :bg="true" @moveTo="moveTo" />
    <div class="homes_banner_top">
      <full-page :options="opts" ref="page">
        <div class="section section1 fp-tableCell" style="position: relative">
          <div class="home_banner b_height">
            <div class="swiper-fathers b_height" id="compoyNext">
              <div v-swiper:mySwiper="swiperOption" class="swiper_banner b_height swiper-no-swiping">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item, index) in list" :key="index" :style="`background-image: url(${mbStatus ? item.tpic : item.smallpic
                  });`">
                    <div class="container b_height">
                      <div class="
                          banner_info
                          s_flex s_justify_content_between s_align_items_center
                          b_height
                          s_flex_column
                        ">
                        <div class="banner_info_left">
                          <h3 class="sq_tilte1 line_h_30 ft_weight_800" style="color: #fff">
                            专利管家
                          </h3>
                          <p class="sq_content sq_content_color line_h_26" style="color: #fff">
                            轻松管理企业专利、快速检索全球专利
                          </p>
                          <div class="search">
                            <el-input placeholder="免费专利检索" v-model="input" @change="changeVal">
                            </el-input>
                            <div class="icon-search" @change="search">
                              <i style="font-size: 30px; color: #b3bac5" class="iconfont icon-sousuo"></i>
                            </div>
                          </div>
                        </div>

                        <div class="sq_sign_btn2 sq_content sq_xl login_but" @click="landingPage">
                          登陆系统
                        </div>
                        <!-- <div class="zhizhao">
                          <img src="@/assets/web/home4.png" alt="" />
                        </div> -->
                        <div class="sq_sign_btn2 sq_content sq_xs mb_top" @click="landingPage">
                          登陆系统
                        </div>
                        <div class="right_news sq_xs" v-if="news_status" v-show="false">
                          <div class="right_news_box">
                            <div class="iconfont_box">
                              <svg class="iconfont" @click="news_status = false" aria-hidden="true">
                                <use xlink:href="#icon-guanbi1"></use>
                              </svg>
                              <!-- <i class="iconfont icon-guanbi1"></i> -->
                            </div>
                            <!-- src="http://patent.oramage.com//storage/uploads/20210421/8d87d1fc4e234961be30748c4e00576e.jpg" -->
                            <img src="../../../../public/5g.jpg" alt="" />
                            <p class="sq_content sq_content_color" style="line-height: 20px">
                              首批顺企知识产权讲师团成立，为顺德贡献智慧力量！
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <span class="scroll-arrow sq_xl" style="
                background-image: url(http://www.zjxpp.com/bocstatic/web/img/ban-arrow.png?v=v17);
              "></span>
            <!-- <img src="@/assets/web/home.jpg" style="width: 100%" alt="" /> -->
          </div>
        </div>
        <div class="section fp-tableCell">
          <div class="home_item">
            <div class="container">
              <div class="
                  home_box
                  s_flex
                  s_justify_content_between
                  s_align_items_center
                  s_flex_column
                  s_flex_column_reverse
                ">
                <div class="sq_sign_btn2 sq_content sq_xs mb_btn_top">
                  <span>查看详情</span>
                </div>
                <div class="home_right">
                  <img v-if="mbStatus" src="@/assets/web/home1.png" alt="" />
                  <img v-else src="@/assets/web/m_home1.png" alt="" />
                </div>
                <div class="home_info">
                  <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                    海外维权援助
                  </h3>
                  <p class="sq_content sq_content_color line_h_26">
                    梳理海外各国的知识产权制度，维权实务指导，搭建优质海外服务网络，依托国家、省、市专业顾问力量，提供前期的专利、商标申请、律师函应对，以及诉讼应对策略的援助公益咨询。
                  </p>
                  <div class="sq_sign_btn2 sq_content sq_xl">
                    <router-link to="/web/overseas/assistance">查看详情</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section fp-tableCell">
          <div class="home_item home_item_bg">
            <div class="container">
              <div class="
                  home_box
                  s_flex_column
                  s_flex
                  s_justify_content_between
                  s_align_items_center
                ">
                <div class="home_info home_info_w">
                  <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1 sq_xl">
                    企业家+科学家工程
                  </h3>
                  <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1 sq_xs">
                    企业家+科学家 <br />
                    对接服务平台
                  </h3>
                  <p class="sq_content sq_content_color line_h_26">
                    通过专利情报分析，在纵深领域，挖掘高校专家大咖，寻找高端项目，通过专利情报分析，为中小企业精准匹配有特长的技术提供方，提升合作成功率；多标签筛选纵深领域；技术专家深度走访评估技术成熟度；从法律和技术两个层面，设计和推进合作。
                  </p>
                  <div class="sq_sign_btn2 sq_content sq_xl">
                    <router-link to="/web/enterprise"> 查看详情</router-link>
                  </div>
                </div>
                <div class="home_right2">
                  <img src="@/assets/web/home2.png" alt="" />
                </div>
                <div class="sq_sign_btn2 sq_content sq_xs mb_btn_top2">
                  <span>查看详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section fp-tableCell">
          <div class="home_item">
            <div class="container">
              <div class="
                  home_box
                  s_flex
                  s_justify_content_between
                  s_align_items_center
                  s_flex_column
                  s_flex_column_reverse
                ">
                <div class="sq_sign_btn2 sq_content sq_xs mb_btn_top2">
                  <span>查看详情</span>
                </div>
                <div class="home_right3">
                  <img src="@/assets/web/home3.png" alt="" />
                </div>
                <div class="home_info">
                  <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                    科技情报动态分析
                  </h3>
                  <p class="sq_content sq_content_color line_h_26">
                    小产品，大学问，精心奉献产品发展白皮书，揭示未来趋势；每周更新特定领域国内外领航企业最新研发技术方案，启迪创新；并可私人定制竞争对手监控，规避市场风险。
                  </p>
                  <div class="sq_sign_btn2 sq_content sq_xl">
                    <router-link to="/web/services/dynamic">
                      查看详情</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section footer fp-tableCell">
          <div class="s_flex s_flex-column s_justify_content_center" style="height: 100%; position: relative">
            <Footer />
          </div>
        </div>
      </full-page>
    </div>
    <rightMenu @moveTo="moveTo" />
    <div class="right_news sq_xl" v-if="news_status && newslist.length !== 0">
      <div class="iconfont_box">
        <svg class="iconfont" @click.stop="news_status = false" aria-hidden="true">
          <use xlink:href="#icon-guanbi1"></use>
        </svg>
      </div>
      <el-carousel height="170px" style="width: 400px; right: 80px" arrow="never">
        <el-carousel-item v-for="(item, index) in newslist.slice(0, 5)" :key="item.title" @click.native="getItem(item)">
          <div class="right_news_box s_flex s_justify_content_between">
            <img v-if="item.tpic" :src="item.tpic" alt="" />
            <p class="sq_content sq_content_color" style="line-height: 20px">
              {{ item.title }}
            </p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="swiper-fathers" id="compoyNext2">
        <div v-swiper:mySwiper="swiperOption2">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in newslist"
              :key="index"
              @click="getItem(item)"
            >
              <div class="right_news_box s_flex s_justify_content_between">
                <div class="iconfont_box">
                  <svg
                    class="iconfont"
                    @click.stop="news_status = false"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-guanbi1"></use>
                  </svg>
                </div>
                <p
                  class="sq_content sq_content_color"
                  style="line-height: 20px"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import { VUE_APP_BASE_API } from "@/config";
import rightMenu from "@/components/web/rightMenu";
import { bannerList, indexList } from "@/api/web";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  components: {
    Header_h,
    Footer,
    Swiper,
    SwiperSlide,
    rightMenu,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      list: [],
      newslist: [],
      opts: {
        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        scrollOverflow: true,
        navigationPosition: "left", //导航小圆点的位置
        navigationColor: "#254875",
        scrollBar: false,
        keyboardScrolling: false, //是否可以使用键盘方向键导航，默认为true
        navigation: document.documentElement.clientWidth > 750 ? true : false,
        css3: true,
        // showActiveTooltip: true,
        scrollingSpeed: 1000,
        // navigationTooltips: ["第一页", "第二页", "第三页"],
        navigationColor: "#254875",
        sectionsColor: ["#239AEC", "#fff", "#E0EDFE", "#fff", "#2a3566"],
        verticalCentered: true,
        scrollOverflow: true,
        resize: true,
      },
      swiperOption: {
        // 分页器配置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 设定初始化时slide的索引
        initialSlide: 0,
        direction: "horizontal",
        // autoplay: {
        //   delay: 3000,
        //   disableOnInteraction: true,
        // },
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
      },
      input: "",
      news_status: true,
      mbStatus: document.documentElement.clientWidth > 750 ? 1 : 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    landingPage() {
      this.$router.push({ path: "/web/guanjia" });
    },
    getItem(item) {
      // console.log(item);
      if (item.view == 1) {
        this.$router.push({
          path: "/web/policies/details",
          query: { id: item.id },
        });
      } else if (item.view == 2) {
        this.$router.push({
          path: "/web/central/details",
          query: { id: item.id },
        });
      } else if (item.view == 3) {
        this.$router.push({
          path: "/web/news/details",
          query: { id: item.id },
        });
      }
    },
    async getList() {
      this.list = await bannerList();
      this.newslist = await indexList();
    },
    moveTo() {
      // window.scrollTo(0, 0);
      this.$refs.page.api.moveTo(1, 0);
    },
    search() {
      if (this.input) {
        this.$router.push({ path: "/web/search", query: { val: this.input } });
      }
    },
    changeVal(val) {
      if (val) {
        this.$router.push({ path: "/web/search", query: { val: val } });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home_banner {
  position: relative;

  .login_but {
    position: absolute;
    left: 70%;
    top: 82%;
    margin-left: -50px;
    margin-top: -50px;
  }
}

.swiper-wrapper {
  .swiper-slide {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
  }
}

.new_box {
  margin-bottom: 60px;
}

.home_box {
  position: relative;
  height: 100%;

  .home_info {
    width: 46%;

    p {
      margin: 56px 0 54px;
      width: 100%;
    }

    h3 {
      line-height: 50px;
    }
  }

  .home_right {
    width: 70%;
    overflow: hidden;

    // padding: 30px;
    img {
      width: 100%;
      transition: all 0.5s ease;

      // padding: 30px;
      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .home_right2 {
    width: 70%;
    overflow: hidden;

    // padding: 30px;
    img {
      width: 100%;
      transition: all 0.5s ease;
      padding: 30px;

      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .home_right3 {
    width: 70%;
    overflow: hidden;
    padding: 30px;

    img {
      width: 100%;
      transition: all 0.5s ease;

      // padding: 30px;
      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .home_info_w {
    width: 46%;
  }
}

.home_item {
  // padding: 40px 0;
  height: 100%;

  .container {
    height: 100%;
  }
}

.home_item_bg {
  background: #f4f7fd;
}

.home_banner {
  width: 100%;
  // background: linear-gradient(0deg, #239aec 0%, #004ed7 100%);
  // background:url("@/assets/web/home5.png")no-repeat;
  // height: 971px;
}

.b_height {
  height: 100%;
}

.search {
  width: 86%;
  margin: 46px 0 56px;
  animation: borderActive 2s infinite;
  border-radius: 20px;
  position: relative;

  .icon-search {
    width: 80px;
    height: 40px;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    text-align: center;
    line-height: 40px;
    color: #999999;
    cursor: pointer;

    i {
      font-size: 20px;
    }
  }
}

.banner_info {
  position: relative;

  h3 {
    margin-bottom: 20px;
    font-size: 45px;
  }

  p {
    font-size: 18px;
  }
}

.zhizhao {
  width: 50%;

  img {
    width: 100%;
  }
}

.banner_info_left {
  width: 40%;
}

.section1 {
  background: url(../../../assets/web/home5.png) no-repeat center;
  background-size: cover;
}

.right_news {
  position: fixed;
  z-index: 1;
  right: 10px;
  top: 90%;
  width: 320px;
  transform: translateY(-50%);
  box-shadow: -4px -4px 24px 0px rgba(48, 49, 58, 0.35);

  .iconfont_box {
    position: absolute;
    top: -8px;
    right: -2px;
    z-index: 111;

    .iconfont {
      width: 35px;
      height: 35px;
      text-align: right;
      cursor: pointer;
    }
  }

  //   .right_news_box {
  //     padding: 12px 15px;
  //     // width: 217px;
  //     // height: 180px;
  //     overflow: hidden;
  //     background: #ffffff;
  //     box-shadow: -4px -4px 24px 0px rgba(48, 49, 58, 0.35);
  //     border-radius: 5px;
  //     img {
  //       width: 190px;
  //       height: 108px;
  //       object-fit: cover;
  //     }
  //     p {
  //       margin-top: 0;
  //       width: 200px;
  //     }
  //   }
}

::v-deep .el-carousel__indicators {
  // display: none;
}

.right_news_box {
  width: 400px;
  height: 170px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #ffffff;
  box-shadow: -4px -4px 24px 0px rgba(48, 49, 58, 0.35);
  border-radius: 5px;

  img {
    width: 120px;
    height: 67px;
    object-fit: contain;
  }

  p {
    text-align: left;
    margin-left: 10px;
    width: 100%;
  }
}

.scroll-arrow {
  position: absolute;
  left: 50%;
  bottom: 5.55%;
  margin-left: -9px;
  width: 18px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: scrollAni 1.5s linear infinite;
  -moz-animation: scrollAni 1.5s linear infinite;
  -webkit-animation: scrollAni 1.5s linear infinite;
  -o-animation: scrollAni 1.5s linear infinite;
  z-index: 3;
}

@keyframes scrollAni {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}

@-moz-keyframes scrollAni {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}

@-webkit-keyframes scrollAni {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}

@-o-keyframes imgfd {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}

@media (max-width: 1440px) {

  .home_box .home_right2,
  .home_box .home_right3,
  .home_box .home_right {
    width: 60%;
  }

  .homes_banner_top {
    margin-top: 40px;
  }

  .home_item {
    .s_justify_content_between {
      justify-content: space-around;
    }
  }
}

@media (max-width: 1440px) {
  .scroll-arrow {
    bottom: 12%;
  }
}

@media (max-width: 1360px) {
  .home_banner {
    position: relative;

    .login_but {
      position: absolute;
      left: 72%;
      top: 81%;
      margin-left: -50px;
      margin-top: -50px;
    }
  }
}

@media (max-width: 750px) {
  .banner_info_left {
    width: 100%;
    margin-top: 40px;
  }

  .homes_banner_top {
    margin-top: 50px;

    .banner_info {
      text-align: center;
      margin-top: 20px;

      h3 {
        margin-bottom: 10px;
        font-size: 36px;
      }

      p {
        font-size: 14px;
      }

      .search {
        width: 100%;
        margin: 25px 0;
        -webkit-animation: borderActive 2s infinite;
        animation: borderActive 2s infinite;
        border-radius: 20px;
      }
    }

    .section {
      .s_justify_content_between {
        justify-content: space-around;
      }
    }

    .swiper_banner {
      .s_justify_content_between {
        justify-content: flex-start;
      }
    }

    .zhizhao {
      width: 100%;
      margin-top: 0;
    }
  }

  .right_news {
    position: absolute;
    width: 90%;
    top: 80%;
    transform: translate(0);
    right: initial;

    .right_news_box {
      height: 70px;
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding: 0 15px;

      img {
        width: 80px;
        height: 50px;
      }

      p {
        text-align: left;
        margin-left: 10px;
      }
    }
  }

  .mb_top {
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    margin: 30px 0;
  }

  .zhizhao img {
    width: 100%;
  }

  .right_news .iconfont_box {
    position: absolute;
    top: -8px;
    right: 0px;
    z-index: 111;
  }

  .home_box .home_right {
    width: 100%;
    padding: 0;

    // margin-top: 40px;
    img {
      padding: 0;
    }
  }

  .home_box .home_right2 {
    width: 100%;
    padding: 0;

    // margin-top: 25px;
    img {
      padding: 0;
    }
  }

  .home_box .home_right3 {
    width: 100%;
    padding: 0;

    // margin-top: 25px;
    img {
      padding: 0;
    }
  }

  .home_box {
    // height: auto;
    padding: 40px 0 80px;
    text-align: center;
  }

  .home_box .home_info {
    width: 100%;
  }

  .home_box .home_info p {
    margin: 15px 0 20px;
    width: 100%;
  }

  .mb_btn_top {
    // margin-top: 100px;
  }

  .mb_btn_top2 {
    margin-top: 40px;
  }

  .home_box .home_info h3 {
    line-height: 36px;
  }

  .footer {
    .s_justify_content_center {
      justify-content: flex-start;
    }
  }
}
</style>